<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import http from '@/http'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { useCookies } from '@vueuse/integrations/useCookies'

const ruleFormRef = ref < FormInstance > ()

//获取路由器对象
const router=useRouter()
//获取本地Cookies对象
const cookies=useCookies()

//验证用户名
const validateUsername = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名！'))
    } else {
        callback()
    }
}
//验证密码
const validatePassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码！'))
    }else {
        callback()
    }
}

//登录用户对象
const ruleForm = reactive({
    username: '',
    password: '',
})

//表单验证
const rules = reactive < FormRules < typeof ruleForm >> ({
    username: [{ validator: validateUsername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
})

//登录提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            //console.log('submit!')
            //表单验证通过
            //1.发送axios的异步请求，根据用户名和密码查询用户
            http.post('/user/checkLogin',ruleForm)
            .then((res)=>{
                //返回token字符串
                //console.log(res)
                const token=res;
                if(token!=''){
                    //登录成功消息提示
                    ElMessage({
                        showClose: true,
                        message: '登录成功',
                        type: 'success',
                    })
                    //登录成功的token存储本地Cookie
                    cookies.set('token',token)
                    //跳转到主页面组件
                    router.push('/')
                }else{
                    //登录失败消息提示
                    ElMessage({
                        showClose: true,
                        message: '登录失败',
                        type: 'error',
                    })
                }
            })

        } else {
            console.log('error submit!')
        }
    })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password"autocomplete="off" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>
